document.addEventListener('DOMContentLoaded', function() {
    const imgPage1 = document.querySelector('.img-page1');
    const imgPage2 = document.querySelector('.img-page2');
    const dots1 = document.querySelectorAll('.container-pagination1 .dot1');
    let currentPage = 1; 
    const intervalTime = 6000; 
    let interval; 

    const pages = [imgPage1, imgPage2];
    pages[currentPage - 1].style.opacity = 1;

    function showPage(page) {
        pages.forEach((pageEl, index) => {
            pageEl.style.opacity = index === page - 1 ? 1 : 0;
            pageEl.style.zIndex = index === page - 1 ? 1 : 0;
        });
    }

    function updateDots1(page) {
        dots1.forEach((dot, index) => {
            if (index === page - 1) {
                dot.classList.add('active');
            } else {
                dot.classList.remove('active');
            }
        });
    }

    function nextPage() {
        currentPage = (currentPage === pages.length) ? 1 : currentPage + 1;
        showPage(currentPage);
        updateDots1(currentPage);
    }

    interval = setInterval(nextPage, intervalTime);

    dots1.forEach((dot, index) => {
        dot.addEventListener('click', function() {
            clearInterval(interval); 
            showPage(index + 1); 
            updateDots1(index + 1);
            interval = setInterval(nextPage, intervalTime); 
        });
    });

    showPage(currentPage);
    updateDots1(currentPage);
});